<template>
	<view class="content">
		<view class="card">
			<text class="select_title">新建路线</text>
			<uni-forms ref="routeForm" labelWidth="100px">
				<uni-forms-item label="路线名称" required>
					<uni-easyinput v-model="routeData.routeName" placeholder="请输入路线名称" />
				</uni-forms-item>
				<uni-forms-item label="出行方式" required>
					<uni-data-select v-model="routeData.routeType" :localdata="range" @change="type_select" />
				</uni-forms-item>
				<view class="break-item">
					<uni-forms-item label="路线简介">
						<uni-easyinput type="textarea" v-model="routeData.routeDesc" placeholder="请输入路线简介"></uni-easyinput>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="card">
			<text class="select_title">应用轮播图</text>
			<view class="font-12">点击添加按钮新增上传区域，图片建议宽高比例4:3，大小不能超过2MB，格式仅限于jpg、png、jpeg、webp、数量上限为6张</view>
			<van-uploader
				class="banner-imgUploader"
				style="margin-top: 40rpx"
				preview-full-image
				multiple
				:file-list="routeData.objKeys"
				accept="image"
				use-before-read
				@delete="deletRouteDataImage"
				@beforeRead="beforeRouteDataRead"
			/>
		</view>
		<view class="card">
			<text class="select_title">日程管理</text>
			<view class="schedule-list" v-for="(item, index) in routeData.travelScheduleDTOS" :key="item.index"></view>
			<view class="margin">
				<van-button @click="addSchedule" icon="plus" type="info" block>新增日程</van-button>
			</view>
			<uni-drawer ref="showRight" mode="right" :width="380">
				<view class="conditionPopup">
					<view class="select_box">
						<text class="select_title">新建日程</text>
						<view class="select_trip">
							<view class="title">日程标题:</view>
							<uni-easyinput class="uni-mt-5" v-model="travelScheduleDTO.scheduleName" placeholder="请输入您的日程标题" >
								<!-- <template slot="suffixIcon">
									<uni-icons type="down" size="20"></uni-icons>
								</template> -->
							</uni-easyinput>
						</view>
					</view>
					<view style="display: flex;margin-bottom: 20rpx;">
						<view class="title">行程规划</view>
					</view>
					<view v-for="(item, index) in travelScheduleDTO.travelItineraryDTOS" :key="index">
						<uni-forms ref="travelForm" labelWidth="100px" style="background-color: red">
							<uni-forms-item label="行程标题" required>
								<uni-easyinput v-model="item.itineraryName" placeholder="行程标题" suffixIcon="tune" @iconClick="changeTravel(item)"/>
							</uni-forms-item>
							<view v-show="item.show" style="padding: 20rpx; background-color: lightgray; border-radius: 10rpx; margin-bottom: 20rpx">
								<uni-forms-item label="选择标注" required>
									<uni-data-select v-model="item.locationDTO" :localdata="locationList" @change="location_select" />
								</uni-forms-item>
								<uni-forms-item label="行程图片" required>
									<van-uploader
										class="travel-imgUploader"
										style="margin: 20rpx; margin-top: 40rpx"
										preview-full-image
										multiple
										:file-list="item.objKeys"
										accept="image"
										use-before-read
										@delete="deletTravelDataImage"
										@beforeRead="beforeTravelDataRead"
									/>
								</uni-forms-item>
								<uni-forms-item label="行程简介">
									<uni-easyinput type="textarea" v-model="item.itineraryDesc" placeholder="请输入路线简介"></uni-easyinput>
								</uni-forms-item>
							</view>
						</uni-forms>
					</view>
					<view class="margin">
						<van-button @click="addTravel" icon="plus" type="info" block>新增行程</van-button>
					</view>
					<view class="select_yes">
						<view @click.stop="restSearch" class="select_rest">重置</view>
						<view @click.stop="submit" style="width: 50%; line-height: 100%; text-align: center">确定</view>
					</view>
				</view>
			</uni-drawer>
			<!-- <uni-popup ref="popup" type="bottom" background-color="#fff">
				
			</uni-popup> -->
		</view>
		<view style="height: 200rpx; background-color: #efefef" />
		<view class="select_yes">
			<view @click.stop="restSearch" class="select_rest">重置</view>
			<view @click.stop="submit" style="width: 50%; line-height: 100%; text-align: center">确定</view>
		</view>
	</view>
</template>

<script>
import { appLocPage } from '@/api/index.js';
import { uploadFile } from '../../api/system/locationType';
export default {
	data() {
		return {
			routePics:[],
			travelPics:[],
			bannerList: [], //图片数组
			locationList: [], //标注点数组
			scheduleData: {}, //日程数据（第二层）
			routeData: {
				client:'app',
				routeDesc:'',
				routeName:'',
				routeType:'',
				objKeys:[],
				travelScheduleDTOS:[]
			}, //路线数据（第一层）
			range: [
				{ value: 0, text: '驾车出行路线规划' },
				{ value: 1, text: '步行出行路线规划' },
				{ value: 2, text: '公交出行路线规划' },
				{ value: 2, text: '骑行出行路线规划' }
			],
			travelScheduleDTO: {
				scheduleName: '',
				travelItineraryDTOS: [
					{
						show: false,
						itineraryName: '',
						objKeysStr: '',
						itineraryDesc: '',
						id: ''
					}
				]
			}
		};
	},
	onLoad() {
		this.getLocationList();
	},
	methods: {
		getLocationList() {
			let that = this;
			appLocPage({}).then((respond) => {
				const dataArr = respond.data;
				dataArr.map((item) => {
					const obj = {
						value: item.id,
						text: item.locationName
					};
					that.locationList.push(obj);
				});
				console.log('locationList:',that.locationList);
			});
		},
		beforeRouteDataRead(e) {
			console.log(e.detail.file);
			let params = {
				filePath: e.detail.file[0].tempFilePath
			};
			uni.showToast({
				icon: 'loading',
				title: '上传中'
			});
			uploadFile(params).then((res) => {
				if (res.code == 200) {
					this.routeData.objKeys.push({
						objKey: res.data[0],
						mapKey: e.detail.file[0].tempFilePath
					});
					uni.hideLoading();
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					});
					uni.hideLoading();
				}
			});
		},
		deletRouteDataImage(e) {
			this.routeData.objKeys.remove(e.detail.file);
			// _.remove(this.getLocationList.pics, {
			// 	mapKey: e.detail.file.tempFilePath
			// });
			
			this.$forceUpdate();
		},
		beforeTravelDataRead(e) {
			console.log(e);
			let params = {
				filePath: e.detail.file[0].tempFilePath
			};
			uni.showToast({
				icon: 'loading',
				title: '上传中'
			});
			uploadFile(params).then((res) => {
				if (res.code == 200) {
					// arr.push(res.data[0]);
					uni.hideLoading();
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					});
					uni.hideLoading();
				}
			});
		},
		deletTravelDataImage(e,objKeys) {
			this.routeData.objKeys.remove(e.detail.file);
			// _.remove(this.getLocationList.pics, {
			// 	mapKey: e.detail.file.tempFilePath
			// });
			
			this.$forceUpdate();
		},
		restSearch() {
			this.$store.commit('RESTLIST');
			this.routePics = [];
			this.scheduleList = [];
			this.routeData = {};
		},
		type_select(val) {
			console.log('selectedLocation:',val);
			this.routeData.routeType = val;
		},
		location_select() {
			
		},
		addSchedule() {
			// this.$refs.popup.open('bottom');
			this.showDrawer('showRight');
		},
		// 打开窗口
		showDrawer(e) {
			this.$refs[e].open();
		},
		// 关闭窗口
		closeDrawer(e) {
			this.$refs[e].close();
		},
		// 抽屉状态发生变化触发
		change(e, type) {
			console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
			this[type] = e;
		},
		addTravel() {
			this.travelScheduleDTO.travelItineraryDTOS.push({
				show: false,
				itineraryName: '',
				objKeysStr: '',
				itineraryDesc: '',
				id: ''
			});
		},
		submit() {
			console.log('para:', this.routeData);
			saveOrUpdateLocationType(this.routeData).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					});
					this.$store.commit('RESTLIST');
					this.value = null;
					this.value1 = null;
					this.fileList = [];
					this.lctShow = false;
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					});
				}
			});
		},
		changeTravel(item) {
			console.log(item);
			item.show = !item.show;
		}
	}
};
</script>

<style lang="scss">
.card {
	margin: 20rpx;
	border-radius: 10rpx;
	background-color: #fff;
	padding: 20rpx;
	// padding-bottom: 20rpx;
	.select_title {
		font-size: 30rpx;
		// margin-left: 20rpx;
		// padding: 20rpx;
		font-weight: 700;
		color: #2280f5;
	}
	.uni-easyinput__content-input {
		font-size: 28rpx;
	}
	.uni-easyinput__placeholder-class,
	.placeholder {
		font-size: 28rpx;
		color: #d8d8d8;
	}
}
.select_box {
	display: grid;
	grid-template-rows: repeat(auto, 1fr);
	grid-gap: 11rpx 5;
	justify-items: start;
	align-items: center;
	.title-view {
		display: flex;
		align-items: center;
		text-align: center;
		height: 110rpx;
	}
	.select_trip {
		display: flex;
		align-items: center;
		height: 88rpx;
		.title {
			width: 140rpx;
			color: #646566;
			text-align: right;
			font-size: 25rpx;
			margin-right: 10rpx;
		}
	}
	.select_item {
		width: 172rpx;
		text-align: center;
		padding: 12rpx;
		border-radius: 12rpx;
		font-size: 24rpx;
		background-color: #dcd9d94a;
	}
}
.conditionPopup {
	padding: 15rpx 12rpx 4rpx 12rpx;
	height: 90%;
	overflow: auto;
}
// .add_btn {
// 	width: calc(100% - 100rpx);
// 	margin: 0 50rpx;
// }
.select_yes {
	position: fixed;
	height: 70rpx;
	bottom: 40rpx;
	width: calc(100% - 40rpx);
	margin: 0 20rpx;
	border: 1rpx solid deepskyblue;
	background-color: #2280f5;
	color: #fff;
	border-radius: 35rpx;
	// text-align: right;
	// padding-right: 30rpx;
	z-index: 1;
	display: flex;
	align-items: center;
	.select_rest {
		width: 50%;
		height: calc(100% - 2rpx);
		margin: 2rpx 0;
		margin-left: 1rpx;
		background-color: #fff;
		color: #2280f5;
		text-align: center;
		border-radius: 35rpx;
		border-top-right-radius: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
